<template>
  <view class="news-item flex flex-row justify-between h-[100%]">
    <view class="w-[210rpx] h-[210rpx] mr-[30rpx]">
      <image
        :src="newsContent.pictureUrl"
        mode="aspectFit"
        class="w-[210rpx] h-[210rpx]"
        :style="`border-radius: ${roundedNum}`"
      />
    </view>

    <view class="h-[100%] flex flex-col justify-around grow">
      <view>
        <text class="text-[#222222] text-[32rpx] leading-[45rpx]">{{
          newsContent.title || newsContent.noticeName
        }}</text>
        <view
          class="text-[#666666] text-[28rpx] max-w-full overflow-hidden text-ellipsis line-clamp-2 my-[20rpx] box-border"
          >{{ newsContent.content }}</view
        >
      </view>
      <view class="flex flex-row justify-between items-center text-[20rpx]">
        <view class="flex flex-row items-center leading-[22rpx]">
          <image
            src="@/static/images/icon-scan.png"
            mode="aspectFit"
            class="w-[24rpx] h-[24rpx] mr-[5rpx]"
          />
          <view class="text-[#666666]">{{ newsContent.quantity }}</view>
        </view>
        <text class="text-[#999999]">{{
          newsContent.uploadDate || newsContent.noticeDate
        }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  newsContent: {
    type: Object,
    default: () => {},
  },
  roundedNum: {
    type: String,
    default: "0rpx",
  },
});
const emit = defineEmits(["onMenuItem"]);
const onMenuItem = (item: any) => {
  emit("onMenuItem", item);
};
</script>

<style scoped lang="scss"></style>
